/* 新增居中容器样式 */
.page-container {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  min-height: 100vh; /* 至少占满视口高度 */
  padding: 20px; /* 添加内边距，防止内容紧贴屏幕边缘 */
  box-sizing: border-box; /* 确保内边距包含在宽度内 */
}

.create-material-container {
  width: 100%; /* 默认宽度占满父容器 */
  max-width: 800px; /* 限制最大宽度 */
}

.create-material-request {
  background-color: white; /* 设置背景颜色 */
  padding: 20px; /* 设置内边距 */
  border-radius: 8px; /* 添加圆角 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
}

.material-count {
  margin-bottom: 20px; /* 设置底部外边距 */
  padding: 15px; /* 设置内边距 */
  border: 1px solid #dee2e6; /* 设置边框 */
  border-radius: 4px; /* 添加圆角 */
}

.add-button {
  margin-top: 10px; /* 设置顶部外边距 */
}

/* 假设存在表格，设置表格样式 */
table {
  width: 100%; /* 表格宽度占满容器 */
  border-collapse: collapse; /* 合并边框 */
  margin-top: 15px; /* 顶部外边距 */
}

th, td {
  padding: 10px; /* 单元格内边距 */
  text-align: center; /* 单元格内容居中 */
  border-bottom: 1px solid #dee2e6; /* 底部边框 */
  max-width: 200px; /* 单元格最大宽度 */
  overflow: hidden; /* 溢出内容隐藏 */
  text-overflow: ellipsis; /* 溢出内容显示省略号 */
  white-space: nowrap; /* 文本不换行 */
}

th {
  background-color: #f8f9fa; /* 表头背景颜色 */
  font-weight: bold; /* 表头文字加粗 */
}
